<!-- 钱包-充值 -->
<template>
	<view class="page-box">
		<view class="page-main-box">
			<text class="title">钱包余额</text>
			<view class="balance">
				<text>¥</text>
				<text>{{walletInfo.balance}}</text>
			</view>

			<view class="box-title">
				<text style="margin-right: 10rpx;margin-left: 10rpx;">请选择充值金额</text>
			</view>
			<view class="main-box">
				<checkbox-group v-for="(item,index) in dataList" :key="index"
					:class="checkedIndex == index || checkedMoney == item.money ? 'child-box' : 'child-box-default'"
					@click="changeColor(index,item.money)">
					<text
						style="color: #FFFFFF;font-size: 18rpx;margin-right: 10rpx;text-align: right; ">{{item.remark}}</text>
					<text
						style="color: #0F0D21;font-size: 36rpx;margin-top: 32rpx;text-align: center;">{{item.moneyType}}</text>
					<text
						style="color: #8C8A8A;font-size: 20rpx;margin-top: 20rpx;text-align: center;">{{item.discount}}</text>
				</checkbox-group>
			</view>
			<view class="recharge-pay">
				<image src="/static/images/wxPay.png" style="float: left;"></image>
				<view class="pay-type">
					<text style="color: #0F0D21;font-size: 28rpx;margin-left: 20rpx;">微信支付</text>
				</view>
				<image src="/static/images/payChecked.png" style="float: right;width: 32rpx; height: 32rpx;"></image>
			</view>

			<view class="btn-box" @tap="handleRec()">立即充值</view>
			<text style="color: #8C8A8A;font-size: 24rpx;margin-top: 32rpx;">温馨提示：
				1、活动首单消费金额不得超过充值金额，且首单消费金额最大不超过2200元；
				2、赠送的优惠券将直接到账，请在“我的-我的卡券”中查看。</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	import {
		postRechargr,
		getDepositParamApi // 获取充值列表
	} from '@/api/order.js'
	import validation from '@/utils/test'

	// 公共方法
	import {
		wxPayment
	} from '@/utils/wx/wxPublick-h5.js'
	import {
		wxPaymentWeiXin
	} from '@/utils/wx/wxPublick-weixin.js'

	export default {
		data() {
			return {
				rechargType: null,
				amount: null,
				dataList: [
					// {
					// 	money: 1888,
					// 	moneyType: '1888元',
					// 	discount: '充值1888元，赠首单8折优惠券',
					// 	remark: '享首单8折'
					// },
				],
				checkedMoney: null,
				checkedIndex: null
			}
		},
		async onPullDownRefresh() {
			await this.handleWallet()
			uni.stopPullDownRefresh()
			uni.showToast({
				duration: 5000,
				title: '刷新成功',
				icon: 'none'
			})
		},
		computed: {
			...mapGetters(['walletInfo', 'userInfo']),
		},
		created() {
			this.getDepositParam()
		},
		async onShow() {
			await this.handleWallet()
		},
		methods: {
			...mapActions(['handleWallet']),
			handlexxx(e) {
				!/^(\d+\.?)?\d{0,2}$/.test(e) ? (this.amount = e.substring(0, e.length -
					1)) : ''
			},
			changeColor(index, money) {
				this.checkedMoney = money;
				this.checkedIndex = index;
			},

			/**
			 * 获取充值列表
			 */
			async getDepositParam() {
				const res = await getDepositParamApi({})
				if (res.code === 200) {
					this.dataList = res.data.map(item => ({
						money: item.dictValue,
						moneyType: item.dictValue + '元',
						discount: item.remark,
						remark: item.cssClass
					}))

					/*
					this.dataList.push({
							money: 0.01,
							moneyType: '0.1元',
							discount: '手动添加测试',
							remark: '享首单8折'
					})
					*/
				} else {
					uni.showToast({
						duration: 2000,
						title: '获取充值列表失败，请刷新页面',
						icon: 'none'
					})
				}

			},

			async handleRec() {
				if (!this.checkedMoney) return uni.showToast({
					duration: 5000,
					title: '请选择充值金额',
					icon: 'none'
				})

				const res = await postRechargr(this.checkedMoney)
				if (res.code !== 200) {
					uni.showToast({
						duration: 5000,
						icon: 'none',
						title: res.msg || '请求失败'
					})
					this.disableSubmit = false;
					return
				}

				const payConfig = res.data.result.jsConfig

				// 小程序支付
				await wxPaymentWeiXin(payConfig)


			},



		}
	}
</script>

<style lang="scss">
	.page-box {
		position: relative;
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) 0%, rgba(202, 191, 192, 0) 100%);
		min-height: 100vh;

		.gn-box {
			position: absolute;
			right: 0;
			top: 20rpx;
			display: flex;
			flex-direction: column;
			z-index: 20;

			view {
				display: flex;
				align-items: center;
				height: 48rpx;
				line-height: 48rpx;
				background: #FDF3F3;
				border-radius: 48rpx 0px 0px 48rpx;
				color: #0F0D21;
				font-size: 24rpx;
				padding: 0 24rpx;
				margin-bottom: 24rpx;
			}
		}

		.page-main-box {
			width: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;
			position: absolute;
			top: 0;
			display: flex;
			flex-direction: column;
			padding-top: 144rpx;
			align-items: center;

			.title {
				color: #0F0D21;
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 56rpx;
			}

			.balance {
				display: flex;
				margin-bottom: 50rpx;

				&>text {
					color: #0F0D21;

					&:last-child {
						font-size: 100rpx;
						font-weight: bold;
					}

					&:first-child {
						font-size: 60rpx;
						margin-right: 16rpx;
						padding-top: 20rpx;
					}
				}
			}

			.box-title {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: center;
				font-size: 32rpx;
				color: #9E9E9E;

				&:before,
				&:after {
					content: "";
					flex: 1 1;
					border-bottom: 4rpx solid #D8D8D8;
					margin: auto;
				}
			}

			.recharge-pay {
				width: 100%;
				margin-top: 50rpx;
				display: flex;
				justify-content: space-between;

				// flex-wrap: wrap;
				&>image {
					// margin-top: 50%;
					// margin:0 auto;

					width: 20px;
					height: 20px;

				}

				.pay-type {
					flex-grow: 1;
					display: flex;
					justify-content: flex-start;

					left: 28px;
					top: 0px;
					width: 56px;
					height: 20px;
					opacity: 1;

					font-family: Source Han Sans CN;
					font-size: 14px;
					// font-weight: normal;
					// line-height: 20px;
					// letter-spacing: 0px;

					color: #0F0D21;

				}
			}

			.main-box {
				width: 100%;
				top: 275px;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;

				padding-top: 32rpx;

				.child-box {
					width: 48%;
					top: 20rpx;
					display: flex;
					box-sizing: border-box;
					// background: #FFFFFF;
					border: 3rpx solid;
					border-color: #D5CFD2;
					border-radius: 12rpx;
					font-size: 28rpx;
					text-align: center;
					flex-direction: column;
					padding-left: 10rpx;
					padding-bottom: 20rpx;
					margin-bottom: 20rpx;

					background: url(/static/images/couponRemark.png) no-repeat top right;
					background-size: 56px 16px;

					background-color: rgba(246, 164, 164, 0.15);
				}

				.child-box-default {
					width: 48%;
					top: 20rpx;
					display: flex;
					box-sizing: border-box;
					background: #FFFFFF;
					border: 3rpx solid;
					border-color: #D5CFD2;
					border-radius: 12rpx;
					font-size: 28rpx;
					text-align: center;
					flex-direction: column;
					padding-left: 10rpx;
					padding-bottom: 20rpx;
					margin-bottom: 20rpx;

					background: url(/static/images/couponRemark.png) no-repeat top right;
					background-size: 56px 16px;
				}
			}

			.btn-box {
				margin-top: 48rpx;
				width: 686rpx;
				height: 88rpx;
				line-height: 88rpx;
				color: #FDF3F3;
				font-size: 36rpx;
				text-align: center;
				background: linear-gradient(180deg, #E27C8A 0%, #EC606F 100%);
				border-radius: 44rpx;
			}


		}
	}
</style>